<template>
	<view class="my-input">
		<input
			:style="{ width: props.sw, height: props.height, lineHeight: props.lh, textAlign: ta,fontSize:fS }"
			@input="handleInput"
			:type="type"
			:value="modelValue"
			class="uni-input-input"
			:maxlength="maxlength"
			:placeholder="placeholder"
			:placeholderStyle="placeholderStyleStr"
		/>
	</view>
</template>

<script setup>
import { ref, watch, computed } from 'vue';

const props = defineProps({
	height: {
		type: String,
		default: '100rpx'
	},
	ta: {
		type: String,
		default: 'center'
	},
	lh: {
		type: String,
		default: '100rpx'
	},
	sw: {
		type: String,
		default: '600rpx'
	},
	fS:{
		type:String,
		default:"36rpx"
	},
	pc: {
		type: String,
		default: '#818181'
	},
	ps: {
		type: String,
		default: '36rpx'
	},
	modelValue: {
		type: String,
		default: ''
	},

	type: {
		type: String,
		default: 'tel'
	},
	placeholder: {
		type: String,
		default: '请输入手机号'
	},
	maxlength: {
		type: Number,
		default: 11
	}
});

const emit = defineEmits(['update:modelValue']);
const placeholderStyleStr = computed(() => {
	return `color: ${props.pc}; font-size: ${props.ps}`;
});
const handleInput = (event) => {
	emit('update:modelValue', event.detail.value);
};

// 监听外部传入的 value 值变化
watch(
	() => props.modelValue,
	(newValue) => {
		// 如果有需要对 newValue 进行处理，可以在这里进行
	}
);
</script>

<style scoped>
.my-input {
	/* 根据需要添加样式 */
}

.uni-input-input {
	margin-left: 50rpx;
}
</style>
